<template>
    <div>
        <div @click="popup.openPopup" class="vue-flow-model">
            <n-icon size="30" color="#18A058">
                <DataSet/>
            </n-icon>
            <Handle id="DataExtraction-inlet" type="target" :position="Position.Left"
                    :is-valid-connection="props.isValidSourcePos"/>
            <Handle id="DataExtraction-export" type="source" :position="Position.Right"
                    :is-valid-connection="props.isValidTargetPos"/>
        </div>
        <span>数据提取</span>
        <flow-popup-window
            :show="popup.show"
            :on-click-outside="popup.clickPopupOutside"
            :x="popup.x"
            :y="popup.y"
        >
            <n-card title="数据提取">
                <p>选择列： </p>
                <n-select
                    v-model:value="field"
                    multiple
                    :options="props.data.data.title"
                    @update:value="popup.reopen"
                    placeholder="选择列"
                    label-field="title"
                    value-field="key"
                />
                <p>提取方式： </p>
                <n-select
                    v-model:value="extractionMethods"
                    :options="extractionMethodsArray"
                    @update:value="popup.reopen"
                    placeholder="提取方式"
                />
                <div v-show="extractionMethods==='start'">
                    <p>保留字符数: </p>
                    <n-input-number
                        v-model:value="number"
                        placeholder="保留字符数"
                    />
                </div>
                <div v-show="extractionMethods==='end'">
                    <p>保留字符数: </p>
                    <n-input-number
                        v-model:value="number"
                        placeholder="保留字符数"
                    />
                </div>
                <div v-show="extractionMethods==='character'">
                    <p>起始字符数: </p>
                    <n-input-number
                        v-model:value="startCharacter"
                        placeholder="起始字符数"
                    />
                    <p>保留字符数: </p>
                    <n-input-number
                        v-model:value="number"
                        placeholder="保留字符数"
                    />
                </div>
                <br>
                <div v-show="extractionMethods==='delimiter'">
                    <n-select
                        v-model:value="position"
                        :options="positionOptions"
                        @update:value="popup.reopen"
                    >
                    </n-select>
                </div>
                <div v-show="extractionMethods==='delimiter'">
                    <p>开始分隔符: </p>
                    <n-input
                        v-model:value="delimiter"
                        placeholder="开始分割符"
                    />
                </div>
                <div v-show="extractionMethods==='delimiter' && position === 'mid'">
                    <p>结束分隔符: </p>
                    <n-input
                        v-model:value="endDelimiter"
                        placeholder="结束分隔符"
                    />
                </div>


                <template #footer>
                    <n-space>
                        <n-button @click="getSuperiorData">获取上级节点数据</n-button>
                        <n-button @click="extraction">提取</n-button>
                    </n-space>
                </template>
            </n-card>
        </flow-popup-window>
    </div>
</template>

<script setup>

import {Handle, Position} from "@vue-flow/core";
import {DataSet} from "@vicons/carbon";
import {useElementsStore} from "@/stores/elements";
import workApi from "@/http/workApi";
import FlowPopupWindow from "@/components/VueFlowModel/vueFlowPopupWindow/FlowPopupWindow.vue";

const props = defineProps(['isValidTargetPos', 'isValidSourcePos', 'id', 'data'])
const elements = useElementsStore()
// 点击弹窗
const popup = reactive({
    show: false,
    x: null,
    y: null,
    wait: false,
    clickPopupOutside: () => {
        popup.closedPopup()
    },
    openPopup: (e) => {
        popup.x = e.x
        popup.y = e.y
        popup.show = true
    },
    closedPopup: () => {
        if (!popup.wait) {
            popup.show = false;
        }
    },
    reopen: () => {
        popup.show = true
    }
})
const field = ref([])
const extractionMethodsArray = [
    {label: "提取首字符", value: "start"},
    {label: "提取尾字符", value: "end"},
    {label: "提取指定字符数", value: "character"},
    {label: "指定分隔符提取", value: "delimiter"},
]
const extractionMethods = ref("start")
const number = ref(0)
const startEndApi = () => {
    workApi.post("perform_tasks/data_extract_position", {
        data: props.data.data,
        operation: {
            row: {serial_number: []},
            column: {
                serial_number: field.value,
                start_end: extractionMethods.value,
                number: number.value
            }
        }
    }).then(r => {
        props.data.data = r.data
    })
}
const startCharacter = ref(0)
const characterApi = () => {

    workApi.post("perform_tasks/data_extract_character", {
        data: props.data.data,
        operation: {
            row: {serial_number: []},
            column: {
                serial_number: field.value,
                character: startCharacter.value,
                number: number.value
            }
        }
    }).then(r => {
        props.data.data = r.data
    })
}
const delimiter = ref("")
const endDelimiter = ref("")
const positionOptions = ref([
    {label: "提取分隔符前", value: "before"},
    {label: "提取分隔符后", value: "after"},
    {label: "提取分隔符中间", value: "mid"}
])
const position = ref(positionOptions.value[0].value)
const delimiterApi = () => {
    if (delimiter.value === '') {
        window.$message.warning("还没填分隔符")
        return
    }
    workApi.post("perform_tasks/data_extract_delimiter", {
        data: props.data.data,
        operation: {
            row: {serial_number: []},
            column: {
                serial_number: field.value,
                delimiter: delimiter.value,
                end_delimiter: endDelimiter.value,
                position: position.value
            }
        }
    }).then(r => {
        props.data.data = r.data
    })
}

const extraction = () => {
    if (field.value.length === 0) {
        window.$message.warning("没有选列呢")
        return
    }
    if (extractionMethods.value === "start" || extractionMethods.value === "end") {
        startEndApi();
    } else if (extractionMethods.value === "character") {
        characterApi();
    } else if (extractionMethods.value === "delimiter") {
        delimiterApi();
    }
}
const getSuperiorData = () => {
    // 获取上级节点数据
    for (let i of elements.elements) {
        if (i['target'] === props.id) {
            for (let j of elements.elements) {
                if (j.id === i['source']) {
                    props.data.data = {...j.data.data}
                    props.data.data.title.map(s => {
                        // 移除可修改
                        delete s.render
                        return s
                    })
                    return
                }
            }
        }
    }
}


</script>

<style scoped lang="less">
.n-select {
    width: 200px;
}
</style>
